<template>
  <div class="lottie-box">
    <a-card class="box-card">
      <div id="animation" style="width: 100%;height: 100%;"></div>
    </a-card>
    <a-card class="box-card">
      <div id="animation1" style="width: 100%;height: 100%;"></div>
    </a-card>
    <a-card class="box-card">
      <div id="animation2" style="width: 100%;height: 100%;"></div>
    </a-card>
    <a-card class="box-card">
      <div id="animation3" style="width: 100%;height: 100%;"></div>
    </a-card>
    <a-card class="box-card">
      <div id="animation4" style="width: 100%;height: 100%;"></div>
    </a-card>
  </div>
</template>

<script>
import loadingJson from './lottieData/loading.json'
import qiaojianpanJson from './lottieData/qiaojianpan.json'
import seoJson from './lottieData/seo.json'
import smileJson from './lottieData/smile.json'
import gongzuoJson from './lottieData/gongzuo.json'
export default {
  name: 'lottieIndex',
  components:{
    
  },
  data() {
    return {
      
    }
  },
  mounted() {
    this.setLottieFun()
  },
  methods: {
    setLottieFun () {
      var animation = bodymovin.loadAnimation({
        container: document.getElementById('animation'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: loadingJson, //导入用法
        // path: 'data.json' //路径用法
      })
      var animation1 = bodymovin.loadAnimation({
        container: document.getElementById('animation1'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: qiaojianpanJson, //导入用法
      })
      var animation2 = bodymovin.loadAnimation({
        container: document.getElementById('animation2'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: seoJson, //导入用法
      })
      var animation3 = bodymovin.loadAnimation({
        container: document.getElementById('animation3'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: smileJson, //导入用法
      })
      var animation4 = bodymovin.loadAnimation({
        container: document.getElementById('animation4'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: gongzuoJson, //导入用法
      })
    }
  }
}
</script>

<style scoped>
  .lottie-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .box-card{
    margin-top: 10px;
    margin-right: 10px;
    width: 250px;
    height: 250px;
  }
</style>